<template>
    <div>
        <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item> <i class="el-icon-lx-calendar"></i> 用户管理 </el-breadcrumb-item>
                <el-breadcrumb-item>用户详情</el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="container">
            <el-row>
                <el-col :span="11">
                       <div class="form-box">
                            <el-form ref="form" :model="form" label-width="80px" >
                                <el-divider content-position="left">用户信息</el-divider>

                                <el-form-item label="用户名" prop="userName">
                                    <el-input v-model="form.userName" disabled></el-input>
                                </el-form-item>

                                <el-form-item label="昵称" prop="nickName">
                                    <el-input v-model="form.nickName" disabled></el-input>
                                </el-form-item>

                                <el-form-item label="状态">
                                    <el-switch v-model="form.status" :active-value="'01'" :inactive-value="'00'" disabled></el-switch>
                                </el-form-item>

                                <el-form-item label="创建时间">
                                    <el-date-picker
                                        v-model="form.createTime"
                                        type="datetime"
                                        :format="dateformat"
                                        placeholder="选择日期时间"
                                        disabled>
                                    </el-date-picker>
                                </el-form-item>

                                <el-form-item label="更新时间">
                                    <el-date-picker
                                        v-model="form.updateTime"
                                        type="datetime"
                                        :format="dateformat"
                                        placeholder="暂未更新"
                                        disabled>
                                    </el-date-picker>
                                </el-form-item>

                                <el-form-item label="最后登录">
                                    <el-date-picker
                                        v-model="form.lastTime"
                                        type="datetime"
                                        :format="dateformat"
                                        placeholder="无"
                                        disabled>
                                    </el-date-picker>
                                </el-form-item>

                                 <el-form-item label="角色">
                                    <el-checkbox-group v-model="form.roles" disabled>
                                        <el-tag v-for="(item, index) in form.roles" :key="index">{{ item.name }}</el-tag>
                                    </el-checkbox-group>
                                </el-form-item>

                            <el-divider content-position="left">员工信息</el-divider>

                                 <el-form-item label="员工编号" >
                                    <el-input v-model="employee.tellerId" disabled></el-input>
                                </el-form-item>

                                 <el-form-item label="员工姓名" >
                                    <el-input v-model="employee.name" disabled></el-input>
                                </el-form-item>

                                <el-form-item label="联系方式" >
                                    <el-input v-model="employee.phone" disabled></el-input>
                                </el-form-item>

                                <el-form-item label="邮箱" >
                                    <el-input v-model="employee.email" disabled></el-input>
                                </el-form-item>

                                 <el-form-item>
                                    <el-button @click="goback" icon="el-icon-arrow-left">返回</el-button>
                                </el-form-item>

                        </el-form>
                    </div>
                </el-col>
                <el-col :span="11">
                    <el-image 
                        style="width: 200px; height: 200px"
                        :src="form.iconUrl" 
                        :preview-src-list="[form.iconUrl]"
                        >
                    </el-image>
                </el-col>
            </el-row>
         
        </div>
    </div>
</template>

<script>
export default {
    name: 'baseform',
    inject: ['reload'],
    data() {
        return {
            id: this.$route.query.id,
            employee: {},
            form: {
                tid:'',
                nickName:'',
                userName:'',
                iconUrl:'',
                status:'',
                createTime:'',
                updateTime:'',
                lastTime:'',
                roles:[]
            },
            dateformat:'yyyy-MM-dd HH:mm:ss'
        };
    },
    created: function () {
        this.init();
        
    },
    methods: {
        async init() {
            var a = await this.$http.get('/user/' + this.id);
            if (a.code == 200) {
                this.form = a.data;
                this.getEmployee();
            } else {
                this.$message.error(a.message);
            }
        },

        async getEmployee() {
            var a = await this.$http.get('/employeetid/' + this.form.tid);
            if (a.code == 200) {
                this.employee = a.data;
            } else {
                this.$message.error(a.message);
            }
        },
        goback(){
            this.$router.go(-1);
        },
    }
};
</script>